/* eslint-disable @typescript-eslint/no-explicit-any */
import { useEffect, useState } from 'react'

const screenSizes = {
  SCREEN_LG: 992,
  SCREEN_MD: 768,
  SCREEN_SM: 576,
  SCREEN_XL: 1200,
  SCREEN_XS: 360,
  SCREEN_XXL: 1400,
}

export const useResize = () => {
  const [width, setWidth] = useState(window.innerWidth)

  useEffect(() => {
    const handleResize = (event: any) => {
      setWidth(event.target.innerWidth)
    }
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return {
    isScreenLg: width >= screenSizes.SCREEN_LG,
    isScreenMd: width >= screenSizes.SCREEN_MD,
    isScreenSm: width >= screenSizes.SCREEN_SM,
    isScreenXl: width >= screenSizes.SCREEN_XL,
    isScreenXs: width >= screenSizes.SCREEN_XS,
    isScreenXxl: width >= screenSizes.SCREEN_XXL,
    width,
  }
}
